<template>
	<view class="block">
		<view class="b-head flex-between">
			<view class="lf flex-item-center">
				<u-avatar size="73" src="" class=""></u-avatar>
				<view class="">
					<view class="name">学雷锋</view>
					<view class="time">2020-10-10 16:09</view>
				</view>
			</view>
			<view class="del flex-item-center">
				<u-icon name="trash-fill" color="#999" size="26"></u-icon>
				<view class="delete">删除</view>
			</view>
		</view>
		<view class="flex-tag">
			<view class="topic-tag" v-for="tag in topicTags" :key="tag.id">{{ tag.key }}</view>
		</view>
		<view class="s-title"><u-button shape="circle" disabled type="error" plain>+走进新时代志愿活动</u-button></view>
		<view class="b-content">
			<view class="text">
				中国共产党第十九次全国代表大会在北京开幕。十九大报告提出了中国发展新的历史方位——中国特色社会主义进入了新时代主义进入了新时代——中国特色社会主义进入了新时代主义进入了新时代
			</view>
		</view>
		<view class="link">外链：http://www.baidu.com</view>
		<!-- 图文信息 -->
		<view class="share-c">
			<scroll-view :scroll-x="true" v-if="k%2 === 0">
				<view class="flex-item-center">
					<view class="item"><u-image height="165rpx" width="220rpx"></u-image></view>
					<view class="item"><u-image height="165rpx" width="220rpx"></u-image></view>
					<view class="item"><u-image height="165rpx" width="220rpx"></u-image></view>
					<view class="item"><u-image height="165rpx" width="220rpx"></u-image></view>
					<view class="item"><u-image height="165rpx" width="220rpx"></u-image></view>
				</view>
			</scroll-view>
			<view class="video" v-else>
				<n-video @listen-play="onVideoPlay" @listen-pause="onVideoPause" height="392rpx"/>
			</view>
		</view>
		<view class="s-addr">
			<text class="iconfont icondingwei"></text>
			<text>德胜国际中心B座</text>
		</view>
		<u-line color="#DDDDDD" />
		<view class="flex-item-center right-flex">
			<view class="s-btn">
				<text class="iconfont icondianzan2"></text>
				<text>888</text>
			</view>
			<view class="s-btn">
				<text class="iconfont iconliuyan"></text>
				<text>6666</text>
			</view>
			<view class="s-btn">
				<text class="iconfont iconfenxiang"></text>
				<text>分享</text>
			</view>
		</view>
	</view>
</template>

<script>
	import NVideo from './video/index.vue'
export default {
	props: {
		k: {
			type: Number,
			default: 0
		}
	},
	components: {
		NVideo
	},
	data() {
		return {
			onPlayVideoCom: null,
			topicTags: [
				{
					key: '#新时代文明实践活动#',
					id: 0
				},
				{
					key: '#当代雷锋#',
					id: 1
				},
				{
					key: '#中国好人#',
					id: 2
				}
			]
		};
	},
	methods: {
		onVideoPlay(context) {
			console.log('page listen video play', context);
			this.onPlayVideoCom = context;
		},
		onVideoPause() {
			// 暂停时释放
			this.onPlayVideoCom = null;
		}
	},
	created() {
		// 当前页面隐藏是暂停播放
		uni.$on('trends-index-hide', () => {
			if (this.onPlayVideoCom) {
				console.log('hide => 停止播放')
				this.onPlayVideoCom.pause();
			}
		})
	}
};
</script>

<style lang="scss">
@import '../commom/styles/icons.css';

.block {
	padding: 20rpx 30rpx;
	margin-bottom: 10rpx;
	background-color: #fff;
	width: 100%;
	box-sizing: border-box;
}

.other-block {
	padding: 20rpx 30rpx 0;
	margin-bottom: 0;
	.block-title {
		margin-bottom: 0;
	}
}

.block-title {
	font-size: 26rpx;
	margin-bottom: 20rpx;
	font-weight: 500;
}

.flex-tag {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	flex-direction: row;
	margin-right: -30rpx;
	width: 100%;
	.topic-tag {
		color: #7a9ecb;
		font-size: 28rpx;
		margin: 0 30rpx 10rpx 0;
	}
}

.s-title {
	/deep/ .u-btn {
		height: 46rpx;
		line-height: 46rpx;
		display: inline-flex;
		font-size: 28rpx;
	}
}

.b-head {
	/deep/ .u-avatar {
		width: 73rpx;
		height: 73rpx;
		margin-right: 20rpx;
	}
	.name {
		font-size: 30rpx;
	}
	.time {
		color: $font-color-grey;
		font-size: 24rpx;
	}
	.delete {
		color: $font-color-grey;
		font-size: 22rpx;
		margin-left: 10rpx;
	}
}

.b-content {
	margin-top: 20rpx;
	.text {
		@include line-ellipsis(3);
	}
}

.link {
	background-color: #f6f6f6;
	height: 60rpx;
	line-height: 60rpx;
	color: #4296fa;
	font-size: 26rpx;
	padding: 0 15rpx;
	margin-top: 10rpx;
}

.share-c {
	margin: 20rpx 0;
	/deep/ .u-image {
		margin-right: 20rpx;
	}
}

.s-addr {
	color: #777777;
	font-size: 22rpx;
	margin-bottom: 20rpx;
	.iconfont {
		font-size: 24rpx;
		margin-right: 10rpx;
	}
}

.right-flex {
	justify-content: flex-end;
	color: #666;
	font-size: 24rpx;
	margin-top: 20rpx;
	.iconfont {
		margin-right: 10rpx;
		font-size: 24rpx;
	}
	.s-btn {
		margin-left: 50rpx;
	}
}
</style>
